<template>
  <div class="app-container">
    <el-form :model="form" ref="form" v-show="showSearch" label-width="100px">
      <div style="margin-top: -40px;">
        <div v-if="form.timeVoList" style="
            background: #fff;
            border-radius: 6px;
          ">
          <el-steps :active="form.timeVoList.length" align-center id="step" >
            <el-step process-status="success" v-for="(i,idx) in form.timeVoList" :key="idx" :title="i.statusName"
              :description="i.time"></el-step>
          </el-steps>
        </div>

        <div style="font-size: 20px; margin-bottom: 20px;">基本信息
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单编号" width="400px">
              <span>{{ form.orderNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单类型" width="400px">
              <span>{{ form.orderTypeName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单状态" width="400px">
              <span>{{ form.orderStatusName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称" width="400px">
              <span>{{ form.supplierName }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="支付状态" width="400px">
              <span>{{ form.payStatusName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付方式" width="400px">
              <span>{{ form.payMethodName }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="订单来源" width="400px">
              <span>{{ form.platSourceName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单金额" width="400px">
              <span>{{ form.orderAmountStr }}元</span>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="支付金额" width="400px">
              <span>{{ form.payAmountStr }}元</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="折扣金额" width="400px">
              <span>{{ form.discountAmountStr }}元</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="优惠金额" width="400px">
              <span>{{ form.useCouponAmountStr }}元</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金币支付" width="400px">
              <span>{{ form.payByBalanceStr }}元</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="开票状态" width="400px">
              <span>{{ form.invoiceStatusName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="配送方式" width="400px">
              <span>{{ form.deliverMethodName }}</span>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="订单备注" width="400px">
              <span>{{ form.remark }}</span>
            </el-form-item>
          </el-col>
            <el-col :span="12">
              <el-form-item label="买家留言" width="400px">
                <span>{{ form.buyMes }}</span>
              </el-form-item>
            </el-col>
        </el-row>
       <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="货币单位" width="400px">
              <span>{{ form.currencyUnit }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付时间" width="400px">
              <span>{{ form.payTime }}</span>
            </el-form-item>
          </el-col>
        </el-row> -->

       <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="下单时间" width="400px">
              <span>{{ form.createTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="取消时间" width="400px">
              <span>{{ form.cancelTime }}</span>
            </el-form-item>
          </el-col>
        </el-row> -->



        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="发货时间" width="400px">
              <span>{{ form.sendTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货状态" width="400px">
              <span>{{ form.sendStatusName }}</span>
            </el-form-item>
          </el-col>
        </el-row> -->

        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="包裹状态" width="400px">
              <span>{{ form.orderPackStatusName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签收时间" width="400px">
              <span>{{ form.signTime }}</span>
            </el-form-item>
          </el-col>
        </el-row> -->

        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="收货时间" width="400px">
              <span>{{ form.receiveTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="自动收货时间" width="400px">
              <span>{{ form.autoReceiveTime }}</span>
            </el-form-item>
          </el-col>
        </el-row> -->

        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="评价状态" width="400px">
              <span>{{ form.commentStatusName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评价时间" width="400px">
              <span>{{ form.commentTime }}</span>
            </el-form-item>
          </el-col>
        </el-row> -->

          <el-row>
            <el-col :span="12">
              <el-form-item label="客户名称" width="400px">
                <span>{{ form.customerName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号码" width="400px">
                <span>{{ form.phone }}</span>
              </el-form-item>
            </el-col>
          </el-row>


        <div style="font-size: 20px; margin-bottom: 30px;" >
          <div style="margin-top: 20px;" v-if="form.itemList && form.itemList.length > 0 ">订单明细
            <orderItem :itemList="form.itemList"></orderItem>
          </div>
        </div>

        <div style="font-size: 20px; margin-bottom: 30px;" >
          <div style="margin-top: 20px;" v-if="form.deliverList && form.deliverList.length >0">物流信息
            <deliver :deliverList="form.deliverList"></deliver>
          </div>
        </div>

        <div style="font-size: 20px; margin-bottom: 30px;">
          <div style="margin-top: 20px;" v-if="form.customerInvoiceVo ">发票抬头
            <customerInvoice :customerInvoiceList="[form.customerInvoiceVo]"></customerInvoice>
          </div>
        </div>

        <div style="font-size: 20px; margin-bottom: 30px;">
          <div style="margin-top: 20px;" v-if="form.invoice ">开票信息
            <invoice :invoiceList="[form.invoice]"></invoice>
          </div>
        </div>

        <div style="font-size: 20px; margin-bottom: 30px;">
          <div style="margin-top: 20px;" v-if="form.complaintList ">投诉信息
            <complaint :complaintList="form.complaintList"></complaint>
          </div>
        </div>



      </div>
    </el-form>

  </div>
</template>

<script>
  import orderItem from "@/components/Order/orderItem";
  import invoice from "@/components/Order/invoiceList";
  import deliver from "@/components/Order/deliver";
  import customerInvoice from "@/components/Order/customerInvoice";
  import postSale from "@/components/Order/postSale";
  import complaint from "@/components/Order/complaintList";

  export default {
    name:"order",
    props: ["info"],
    components:{
      orderItem,
      invoice,
      deliver,
      postSale,
      complaint,
    },
    data() {
      return {
        zIndex: 3000,
        showSearch: true,
        // 预览图片
        carouselImgs: [],
        detailImgs: [],
        // 表单参数
        form: {
          invoice:{},
          itemList:[],
          deliverList:[],
          postSaleList:[],
          complaintList:[],
        },
      };
    },
    created() {
      this.form = JSON.parse(JSON.stringify(this.info));
      console.log(this.form)
    },
    methods: {

    }
  };
</script>

<style scoped>
  .el-form-item {
    margin-bottom: 0;
  }
  #step >>> .el-step__icon-inner {
    display: none;
  }
</style>
